import React from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { Input, Modal, TreeSelect, Form } from 'antd';

const { TreeNode } = TreeSelect;
const FormItem = Form.Item;
const { TextArea } = Input;

const EditModelClassForm = Form.create()(props => {
  const { modalVisible, form, onCancel, handleEdit, editDetail, modelClassData } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleEdit(fieldsValue, form);
    });
  };
  // 组件树形控件 子节点渲染
  const renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.name} key={item.id} value={item.id}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.name} key={item.id} value={item.id}></TreeNode>;
    });

  return (
    <Modal
      title={formatMessage({ id: 'app.mm.modelclass.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      maskClosable={false}
      onCancel={onCancel}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem>
          {form.getFieldDecorator('id', { initialValue: editDetail.id })(<Input type="hidden" />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.modelclass.info.name' })} colon={false}>
          {form.getFieldDecorator('name', {
            initialValue: editDetail.name ? editDetail.name : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.modelclass.info.name.place' }),
              },
            ],
          })(<Input placeholder={formatMessage({ id: 'app.mm.modelclass.info.name.place' })} />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.modelclass.info.pid' })} colon={false}>
          {form.getFieldDecorator('pid', {
            initialValue: editDetail.pid && editDetail.pid !== -1 ? editDetail.pid : undefined,
            message: formatMessage({ id: 'app.mm.modelclass.info.pid.place' }),
          })(
            <TreeSelect
              showSearch
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder={formatMessage({ id: 'app.mm.modelclass.info.pid.place' })}
              allowClear
              treeDefaultExpandAll
            >
              {renderTreeNodes(modelClassData)}
            </TreeSelect>,
          )}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.modelclass.info.more.desc' })} colon={false}>
          {form.getFieldDecorator('desc', {
            initialValue: editDetail.desc ? editDetail.desc : undefined,
            rules: [],
          })(<TextArea rows={4} />)}
        </FormItem>
      </div>
    </Modal>
  );
});
export default connect(({ modelclass, loading }) => ({
  modelclass,
  loading: loading.models.modelclass,
}))(EditModelClassForm);
